<template>
	<view>
		<view class="listView">
			<view v-for="(item,index) in goodsList" :key="item.goods_id">
				<yg-goodsItem :goodsInfo="item" @tap="itemClickAction(item)"  ></yg-goodsItem>
			</view>
		</view>
		<view class="loading">{{isLoading ? '没有更多数据了' : '正在加载中...'   }}</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// 分类id
				cid: '',
				// 当前请求的页数
				currentPage: 1,
				// 每页请求的数据量
				pageSize: 10,
				// 商品列表数据
				goodsList: [],
				// 是否正在加载数据
				isLoading: false,
			}
		},

		onLoad(e) {
			this.cid = e['cid'] || ''
			this.getGoodslistData()
		},

		//  下拉刷新
		onPullDownRefresh() {
			console.log('-- 下拉刷新触发了');
			this.currentPage = 1
			this.isLoading = false
			this.getGoodslistData()
		},

		// 触底刷新
		onReachBottom() {
			console.log('-- 触底刷新触发了');
			this.getGoodslistData()
		},

		methods: {

			// 获取商品列表数据
			getGoodslistData() {
				let params = {
					cid: this.cid,
					pagenum: this.currentPage,
					pagesize: this.pageSize,
				}
				this.$reqGet('/api/public/v1/goods/search', params).then(res => {
					const code = res.statusCode;
					if (code == 200) {

						let total = res.data.message.total || 0

						if (this.currentPage <= 1) {
							this.goodsList = []
						}
						if (this.goodsList.length >= total) {
							this.isLoading = true
							uni.showToast({
								icon:'none',
								title: '没有更多数据了~'
							});
							return
						} else {
							this.currentPage++
							this.isLoading = false
							let list = res.data.message.goods || []
							this.goodsList = this.goodsList.concat(list)
						}
						// 停止刷新
						uni.stopPullDownRefresh();
					}
				})
			},
			
			//  跳转到详情
			itemClickAction(item) {
				
				console.log("---  打印: " + JSON.stringify(item));
				
			  uni.navigateTo({
			  	url: '/pages/goods_detail/goods_detail' + '?goods_id=' + item.goods_id
			  })	
			}	
		}
	}
</script>

<style scoped lang="scss">
	.listView {
		padding: 0 20rpx;
	}

	.loading {
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #999;
	}


	
</style>